<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { userService } from '../../services/user'
import { roleService } from '../../services/role'
import { showError, showWarning } from '../../utils/message'

const props = defineProps({
  selectedUsers: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['confirm', 'cancel'])

// 对话框可见状态
const dialogVisible = ref(false)

// 选中的角色
const selectedRoles = ref([])

// 角色列表
const roleList = ref([])

// 加载状态
const loading = ref(false)

// 是否包含受保护的管理员账户
const hasAdminAccount = computed(() => {
  return props.selectedUsers.some(user => user.username === 'admin');
})

// 显示的警告信息
const warningMessage = computed(() => {
  if (hasAdminAccount.value) {
    if (props.selectedUsers.length === 1) {
      return '系统管理员(admin)账号的角色无法被修改，请使用其他账号进行操作。';
    } else {
      return '选中的用户中包含系统管理员(admin)账号，此账号的角色将不会被修改。';
    }
  }
  return '';
})

// 是否禁用表单
const isFormDisabled = computed(() => {
  // 如果只选中了一个用户，且是admin，则禁用整个表单
  return props.selectedUsers.length === 1 && hasAdminAccount.value;
})

// 角色类型映射
const roleTypeMap = {
  'ROLE_SUPER_ADMIN': 'danger',    // 系统管理员 - 红色
  'ROLE_BUSINESS_STAFF': 'primary', // 业务员 - 蓝色
  'ROLE_OPERATOR': 'warning',      // 操作员 - 黄色
  'ROLE_MANAGER': 'success',       // 负责人 - 绿色
  'ROLE_FINANCE': 'info'           // 财务员 - 灰色
}

// 获取角色标签类型
const getRoleType = (roleCode) => {
  return roleTypeMap[roleCode] || 'info'
}

// 加载角色列表
const loadRoleList = async () => {
  try {
    loading.value = true
    const { data } = await roleService.getRoles()
    roleList.value = data || []
  } catch (error) {
    console.error('Failed to load roles:', error)
    showError('加载角色列表失败')
  } finally {
    loading.value = false
  }
}

// 计算选中的用户显示名称
const selectedUsersText = computed(() => {
  const names = props.selectedUsers.map(user => {
    const userName = user.real_name || user.username;
    return user.username === 'admin' ? `${userName} (系统保护账号)` : userName;
  });
  return names.join(', ');
})

// 打开对话框
const openAssignDialog = () => {
  dialogVisible.value = true
  selectedRoles.value = []
  // 加载角色列表
  loadRoleList()
  
  // 如果包含admin账号，显示警告
  if (hasAdminAccount.value) {
    showWarning(warningMessage.value);
  }
}

// 提交
const handleConfirm = () => {
  if (selectedRoles.value.length === 0) {
    return
  }
  
  // 如果只有admin一个账号，直接关闭对话框，不进行任何操作
  if (props.selectedUsers.length === 1 && hasAdminAccount.value) {
    showWarning('系统管理员账号的角色无法被修改');
    dialogVisible.value = false;
    return;
  }
  
  // 发送选中的角色和过滤后的用户（排除admin）
  const filteredUsers = hasAdminAccount.value ? 
    props.selectedUsers.filter(user => user.username !== 'admin') : 
    props.selectedUsers;
  
  emit('confirm', selectedRoles.value, filteredUsers)
  dialogVisible.value = false
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
  emit('cancel')
}

// 暴露方法给父组件
defineExpose({
  openAssignDialog
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="分配角色"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-skeleton :loading="loading" animated>
      <template #default>
        <div class="selected-users">
          <div class="label">选中的用户:</div>
          <div class="value">{{ selectedUsersText }}</div>
        </div>
        
        <el-alert
          v-if="warningMessage"
          type="warning"
          :closable="false"
          show-icon
          :title="warningMessage"
          class="admin-warning"
        />
        
        <div class="role-list">
          <div class="label">请选择角色:</div>
          <el-checkbox-group v-model="selectedRoles" :disabled="isFormDisabled">
            <el-checkbox
              v-for="role in roleList"
              :key="role.id"
              :label="role.id"
              border
              class="role-checkbox"
            >
              <div class="role-item">
                <span class="role-name">{{ role.name }}</span>
                <span v-if="role.description" class="role-description">{{ role.description }}</span>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </template>
    </el-skeleton>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button
          type="primary"
          :disabled="selectedRoles.length === 0 || loading || isFormDisabled"
          :loading="loading"
          @click="handleConfirm"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.selected-users {
  margin-bottom: 20px;
}

.label {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-primary);
}

.value {
  padding: 14px;
  background-color: var(--el-fill-color-light);
  border-radius: 4px;
  max-height: 100px;
  overflow-y: auto;
}

.admin-warning {
  margin-bottom: 20px;
}

.role-list {
  margin-bottom: 20px;
}

.role-checkbox {
  display: block;
  margin-bottom: 12px;
  width: 100%;
  padding: 5px;
}

.role-checkbox:deep(.el-checkbox__label) {
  width: 100%;
  padding-right: 10px;
}

.role-item {
  display: flex;
  flex-direction: column;
}

.role-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.role-description {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.4;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 